<template>
  <transition name="fade-transform" mode="out-in">
  <div class="answer-card__wrap" v-if="showCard">
    <div class="answer-card" @click="changeRoute(questionId)">
      <div class="answer-card__left" v-if="!solved">
        <div>
          <p>{{replyNumber}}</p>
          <p>回答</p>
        </div>
      </div>
      <div class="answer-card__left2" v-if="solved">
        <span>已解决</span>
      </div>
      <div class="answer-card__right">
        <div class="title">
            <p class="title1">{{questionTitle}}</p>
          <div class="icon-box">
            <p class="icon" style="background-color: #00AAE6" v-if="priority>0">
              <yun-icon name="top" size="12px" color="#fff"></yun-icon>
            </p>
          </div>
            <div class="label-box">
                <p v-if="isMy&&status===-1" class="label-box__err">被锁定</p>
            </div>
        </div>
        <p class="content">
          {{questionAbstract}}
        </p>
        <div class="footer">
          <div class="info-left">
            {{userNick}}<span>·</span>{{createTime}}
          </div>
          <div class="info-right">
<!--            <div class="icon-box">-->
<!--              <yun-icon name="star" size="10px" vertical="middle" color="#ccc"></yun-icon>-->
<!--              <span>12</span>-->
<!--            </div>-->
            <div class="icon-box" v-if="praiseNum">
              <yun-icon name="like1" size="12px" vertical="top" color="#ccc"></yun-icon>
              <span>{{praiseNum}}</span>
            </div>
            <div class="icon-box">
              <yun-icon name="view" size="10px" vertical="middle" color="#ccc"></yun-icon>
              <span>{{viewNumber}}</span>
            </div>
          </div>
          <div class="label-box">
            <p v-for="(val,index) in tags" :key="val.tagId">{{val.tagName}}</p>
          </div>
        </div>
      </div>
    </div>

    <div class="answer-card__abs" v-if="isMy&&status!==-1">
      <div class="container__abs">
        <div class="deleteButton" @click="showAlert(questionId)">
          <yun-icon name="delete" size="12px" pb="3px"></yun-icon>
        </div>
        <nuxt-link :to="{path:'/answer/release',query:{id:questionId}}" tag="div" class="editButton">
          <yun-icon name="edit" size="12px"></yun-icon>
        </nuxt-link>
      </div>
    </div>

  </div>
  </transition>
</template>

<script>
  import {dateConvert} from "../../action/utils/dataConvert";
  import config from '../../action/config';

  export default {
  name: "answerCard",
  props:{
    //cardType: String,
    info:{
      type:Object,
      default: () => ({})
    },
    isMy:{
      type:Boolean,
      default:false
    }
  },
  data() {
    return{
      questionAbstract:'',
      questionId:'',
      questionTitle:'',
      replyNumber:'',
      solved:'',
      createTime:'',
      tags:[],
      userNick:'',
      viewNumber:'',
      showCard:true,
      status:0
    }
  },
  created(){
    this.dateGet2Info();
  },

  methods:{
    dateGet2Info(){
      let info = this.info;
      if(this.info.questionId){
        this.questionAbstract = info.questionAbstract;
        this.questionId = info.questionId;
        this.questionTitle = info.questionTitle;
        this.replyNumber = info.replyNumber;
        this.solved = info.solved;
        this.createTime = dateConvert(info.createTime);
        this.tags = info.tags;
        this.userNick = info.userNick;
        this.viewNumber = info.viewNumber;
        this.status = info.status;
        this.praiseNum = info.praiseNum;
        this.priority = info.priority;
      }
      if(this.info.itemId){
        this.questionTitle = info.title;
        this.questionAbstract = info.description;
        this.questionId = info.itemId;
        this.createTime = dateConvert(info.createTime);
        this.userNick = info.author;
        this.replyNumber = info.extra?info.extra.replyNumber:0;
        this.solved = info.extra?info.extra.solved:false;
      }
    },

    showAlert(id){
      this.$alert('确认删除？', '', {
        confirmButtonText: '确定',
        callback: action => {

          this.dataDeleteItem(id)
        }
      });
    },

    dataDeleteItem(id){
        this.$axios.$delete(config.api.delete.Question.delete+id).then((response)=>{
          if(response.code===0){
            this.showCard=false;
            this.$message({
              type:'success',
              message:'项目删除成功!'
            })
          }else{
            this.$message({
              type:'warning',
              message:'项目删除失败!'
            })
          }
        })

    },
    changeRoute(r){

        let routeUrl = this.$router.resolve({
          path: "/answer/detail/"+r
        });
        window.open(routeUrl.href,'_blank')

    }
  }
}
</script>

<style lang="scss">
  .answer-card__wrap{
    background-color: #fff;
    position:relative;
    .answer-card__abs{
      position: absolute;
      top:0;
      right:0;
      width:200*$length;
      height:100%;
      background-color: transparent;
      overflow: hidden;
      .container__abs{
        position: absolute;
        top:-100*$length;
        right:-100*$length;
        width:200*$length;
        height:200*$length;
        border-radius: 50%;
        background-color: rgba(34,34,34,.4);
        transform: rotateZ(90deg);
        transition: 1s all;
        opacity: 0;


        .deleteButton{
          position: absolute;
          bottom:30*$length;
          left:60*$length;
          width:30*$length;
          height:30*$length;
          border-radius: 50%;
          background-color:#ff4949;
          @extend %cursorPointer;
          @extend %flex-row-center;
          @extend %animate-transition;
          &:hover{
            filter:brightness(1.1);
            transform: scale(1.03);

          }
          i{
            color:#fff;
          }
        }
        .editButton{
          position: absolute;
          bottom:60*$length;
          left:30*$length;
          width:30*$length;
          height:30*$length;
          border-radius: 50%;


          background-color: #13ce66;
          @extend %cursorPointer;
          @extend %flex-row-center;
          @extend %animate-transition;

          &:hover{
            filter:brightness(1.1);
            transform: scale(1.03);
          }
          i{
            color:#fff;
          }
        }
      }
    }

    .answer-card{
      box-sizing: border-box;
      //margin: 0 24*$length;
      padding: 24*$length 24*$length;
      width: 100%;
      border-bottom: 1px dashed #EFEFEF;
      @extend %flex-row-spb;
      align-items: flex-start;
      justify-content: flex-start;
      @extend %cursorPointer;

      .answer-card__left{
        flex-shrink:0;
        margin-top: 3*$length;
        width: 84*$length;
        height: 84*$length;
        line-height: 84*$length;
        background-color: #F4F8FA;
        @include border-radius(4*$length);
        text-align: center;
        > div{
          display: inline-block;
          vertical-align: middle;
          line-height: 16*$length;
          p{
            @include fontStyle(12,16,500,#999,center);
            &:first-child{
              margin-bottom: 12*$length;
              @include fontStyle(16,21,500,#222222,center);
            }
          }
        }
      }
      .answer-card__left2{
        flex-shrink:0;
        margin-top: 3*$length;
        width: 84*$length;
        height: 84*$length;
        line-height: 84*$length;
        background-color: #F4F8FA;
        border: 1*$length solid #75D098;
        @include border-radius(4*$length);
        text-align: center;
        > span{
          @include fontStyle(12,17,500,#75D098,center);
        }
      }
      .answer-card__right{
        margin-left: 20*$length;
        @extend %flex-column-spb;
        align-items: start;
        > .title{
            @extend %flex-row-center;
            justify-content: flex-start;
            .title1{
                @extend %animate-transition;
                @include fontStyle(18,25,500,#222,left);
                height: auto;
            }
           > .icon-box{
            margin-right:15*$length;
            @extend %flex-row-spb;
            justify-content: flex-start;
            > .icon{
              margin-right:10*$length;
              width:20*$length;
              height:20*$length;
              border-radius:2*$length;
              @extend %flex-column-center;
              background-color: #FF7474;
            }
          }
            > .label-box{
                margin-top: 8*$length;
                margin-bottom: 8*$length;
                margin-left:32*$length;
                .label-box__err{
                    color:#fff;
                    background-color: #f11818;
                }
                .label-box__zero{
                    color:#fff;
                    background-color: #ff780091;
                }
                .label-box__pass{
                    color:#fff;
                    background-color: #11ef1fb0;
                }
                > p{
                    display: inline-block;
                    margin-right:10*$length;
                    padding:2*$length 8*$length;
                    background-color: #F4F8FA;
                    @include border-radius(2*$length);
                    @include fontStyle(12,16,500,#999,center);
                    @extend %animate-transition;
                    @extend %cursorPointer;

                    &:hover{
                        background-color:rgba(0,170,230,.2);
                        color:rgba(0,170,230,1);
                    }
                }
            }
        }
        > .content{
          padding: 11*$length 0 15*$length 0;
          @include fontStyle(14,20,500,#666,left);
          height: auto;
        }
        .footer{
          line-height: 18*$length;
          @extend %flex-row-spb;
          .info-left{
            margin-right: 37*$length;
            @include fontStyle(12,17,500,#999,left);
            > span{
              margin: 0 3*$length;
            }
          }
          .info-right{
            .icon-box{
              display: inline-block;
              margin-right: 17*$length;
              @include fontStyle(12,12,500,#ccc,left);
              vertical-align: 4*$length;
              > span{
                margin-left:5*$length;
                vertical-align: middle;
              }
            }
          }
          > .label-box{
              margin-top: 8*$length;
              margin-bottom: 8*$length;
            margin-left:32*$length;
            .label-box__err{
              color:#fff;
              background-color: #f11818;
            }
            .label-box__zero{
              color:#fff;
              background-color: #ff780091;
            }
            .label-box__pass{
              color:#f2f8f1;
              background-color: #74b56a;
            }
            > p{
              display: inline-block;
              margin-right:10*$length;
              padding:2*$length 8*$length;
              background-color: #F4F8FA;
              @include border-radius(2*$length);
              @include fontStyle(12,16,500,#999,center);
              @extend %animate-transition;
              @extend %cursorPointer;

              &:hover{
                background-color:rgba(0,170,230,.2);
                color:rgba(0,170,230,1);
              }
            }
          }
        }
        &:hover{
          > .title{
            .title1{
                color:#00AAE6;
            }
          }
        }
      }
    }
    &:hover{
      .answer-card__abs{
        .container__abs{
          transform: rotateZ(0deg);
          opacity: 1;
        }
      }
    }
  }
</style>
